<template>
  <el-popover :placement="placement" :trigger="trigger" v-tip="tipObj" :disabled="tipObj.disabled">
    <div style="white-space:pre-line">
      <slot />
    </div>
    <div slot="reference" class="text_els">
      <span>
        <slot />
      </span>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: 'ToolTip',
  props: {
    placement: {
      type: String,
      default: 'top'
    },
    trigger: {
      type: String,
      default: 'hover'
    }
  },
  data() {
    return {
      tipObj: {
        that: this,
        disabled: true
      }
    };
  },
  directives: {
    tip: function(el, binding) {
      const tag = el.querySelector('.text_els'), tagChild = tag.children[0];
      binding.value.that.$nextTick(() => {
        binding.value.disabled = tag.offsetWidth >= tagChild.offsetWidth;
      });
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
